<template>
  <h4>----------F----------</h4>
  <h5>当前水温为:{{ temp }}℃,水位为:{{ height }}cm</h5>
  <button @click="temp++">点我+1</button>
  <button @click="height += 10">点我+10</button>

  <div class="">
  </div>
</template>

<script setup lang="ts" name="">
import { reactive, ref, watch, watchEffect } from "vue"
let temp = ref(10)
let height = ref(0)
const stopWatch = watch([temp, height], ([newTemp, newHeight]) => {
  if (newTemp >= 60 || newHeight >= 80) {
    console.log('watch监视下:温度或高度过高');
    stopWatch()
  }
})
// 立即运行函数,并自动监听依赖
const stopWE = watchEffect(() => {
  if (temp.value >= 80 || height.value >= 100) {
    console.log('watchEffect监视下:温度或高度过高');
    stopWE()
  }
})
</script>

<style></style>